<template>
	<el-popover width="70%" ref="iconPopover" placement="bottom-start" :popper-class="style['popper-class']"
		v-model:visible="visible">
		<h5 class="title">默认图标</h5>
		<span :class="['icons', { active: modelValue === icon }]" v-for="(icon, index) in iconList" :key="icon + index"
			@click="selectIcon(icon)">
			<v-icon size="20px" :name="icon"></v-icon>
		</span>
		<template v-if="useIcons.length">
			<h5 class="title">自定义图标</h5>
			<span :class="['icons', { active: modelValue === icon }]" v-for="(icon, index) in useIcons" :key="icon + index"
				@click.left="selectIcon(icon)" @click.right.prevent.stop="deleteIcon(icon, index)">
				<v-icon size="20px" :name="icon"></v-icon>
			</span>
		</template>
		<br />
		<div style="display: flex; justify-content: flex-start; align-items: center; margin-top: 15px">
			<el-button class="upload-button" icon="upload">
				上传图标
				<input ref="uploadInput" type="file" @change="upload" accept="image/*" />
			</el-button>
			<el-popover effect="dark" content="自定义图标右键点击删除" placement="right" width="210">
				<template #reference>
					<InfoFilled style="color: #777; width: 14px; height: 14px; vertical-align: middle" />
				</template>
			</el-popover>
		</div>
		<template #reference>
			<el-button v-if="modelValue" @click="visible = !visible" v-click-outside="onClickOutside">
				<v-icon size="20px" :name="modelValue"></v-icon>
			</el-button>
			<el-button v-else icon="upload-filled" @click="visible = !visible" v-click-outside="onClickOutside">
				请选择图标
			</el-button>
		</template>
	</el-popover>
</template>

<script setup>
import { computed, ref, shallowRef, useCssModule } from "vue"
import { ClickOutside as vClickOutside } from "element-plus"
import { elementIconsKey } from "/plugins/icons"
import selfIcons from "/plugins/icons/static"
import { useUpload } from "./modules/upload"

defineProps({
	modelValue: {
		type: String,
		default: "",
	},
})
const emits = defineEmits(["update:modelValue"])
const style = useCssModule()

const visible = shallowRef(false)
const iconList = computed(() => elementIconsKey.concat(Object.keys(selfIcons)))
const { useIcons, upload, deleteIcon } = useUpload(selectIcon)

function selectIcon(icon) {
	visible.value = false
	emits("update:modelValue", icon)
}

function onClickOutside(event) {
	if (event.path.some(el => /el\-popper/.test(el.className) || /message\-box/.test(el.className))) {
		return
	}
	visible.value = false
}
</script>

<style lang="scss" scoped>
.icons {
	display: inline-block;
	margin: 0 5px;
	padding: 5px;
	cursor: pointer;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	vertical-align: middle;
	transition: all 0.3s;
	border-radius: 5px;

	&:hover {
		background-color: #e9e9e9;
	}

	&.active {
		// outline: 1px solid var(--el-color-primary);
		box-shadow: inset 0 0 5px 0 rgba(#000, 0.35);
	}

	~.title {
		margin-top: 10px;
	}
}

.upload-button {
	position: relative;
	margin-right: 10px;

	input {
		opacity: 0;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 5;
		cursor: pointer;
	}
}
</style>

<style lang="scss" module>
.popper-class {
	max-height: 500px;
	overflow: auto;
}
</style>
